<template>
  <div class="cron" :val="value_">
    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane label="快捷选择" name="k">
        <el-select style="width: 300px" size="small" v-model="chooseCron">
          <el-option v-for="(item, index) in kuanjie" :key="index" :label="item.name" :value="item.value"></el-option>
        </el-select>
      </el-tab-pane>
      <el-tab-pane label="秒" name="s">
        <second-and-minute :value.sync="sVal" lable="秒"></second-and-minute>
      </el-tab-pane>
      <el-tab-pane label="分" name="m">
        <second-and-minute :value.sync="mVal" lable="分"></second-and-minute>
      </el-tab-pane>
      <el-tab-pane label="时" name="h">
        <hour :value.sync="hVal" lable="时"></hour>
      </el-tab-pane>
      <el-tab-pane label="日" name="d">
        <day :value.sync="dVal" lable="日"></day>
      </el-tab-pane>
      <el-tab-pane label="月" name="month">
        <month :value.sync="monthVal" lable="月"></month>
      </el-tab-pane>
      <el-tab-pane label="周" name="week">
        <week :value.sync="weekVal" lable="周"></week>
      </el-tab-pane>
      <el-tab-pane label="年" name="year">
        <year :value.sync="yearVal" lable="年"></year>
      </el-tab-pane>
    </el-tabs>
    <!-- table -->
    <el-table :data="tableData" size="mini" border style="width: 100%; margin-top: 15px">
      <el-table-column prop="sVal" label="秒"></el-table-column>
      <el-table-column prop="mVal" label="分"></el-table-column>
      <el-table-column prop="hVal" label="时"></el-table-column>
      <el-table-column prop="dVal" label="日"></el-table-column>
      <el-table-column prop="monthVal" label="月"></el-table-column>
      <el-table-column prop="weekVal" label="周"></el-table-column>
      <el-table-column prop="yearVal" label="年"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import SecondAndMinute from './cron/secondAndMinute'
import hour from './cron/hour'
import day from './cron/day'
import month from './cron/month'
import week from './cron/week'
import year from './cron/year'
export default {
  name: 'cornS',
  props: {
    value: {
      type: String,
    },
    // 自定义快捷选项
    jobCronList: {
      type: Array,
    },
  },
  data() {
    return {
      activeName: 'k',
      sVal: '',
      mVal: '',
      hVal: '',
      dVal: '',
      monthVal: '',
      weekVal: '',
      yearVal: '',

      kuanjie: [
        {
          value: '00 00 00 * * ? *',
          name: '每日0点执行自动监测',
        },
        {
          value: '00 00 00 ? * 2 *',
          name: '每周一0点执行自动监测',
        },
        {
          value: '00 00 00 01 * ? *',
          name: '每月1日0点执行自动监测',
        },
      ],
      chooseCron: '',
    }
  },
  watch: {
    value(a, b) {
      this.updateVal()
    },
    chooseCron() {
      this.$emit('update:value', this.chooseCron)
    },
    jobCronList: {
      handler() {
        this.kuanjie = this.jobCronList.map(item => {
          return {
            value: item.aliasName,
            name: item.name,
          }
        })
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {
    tableData() {
      return [
        {
          sVal: this.sVal,
          mVal: this.mVal,
          hVal: this.hVal,
          dVal: this.dVal,
          monthVal: this.monthVal,
          weekVal: this.weekVal,
          yearVal: this.yearVal,
        },
      ]
    },
    value_() {
      if (!this.dVal && !this.weekVal) {
        return ''
      }
      if (this.dVal === '?' && this.weekVal === '?') {
        // return;
        // this.$message.error("日期与星期不可以同时为“不指定”");
        // alert("日期与星期不可以同时为“不指定”")
      }
      if (this.dVal !== '?' && this.weekVal !== '?') {
        // return;
        // this.$message.error("日期与星期必须有一个为“不指定”");
      }
      const v = `${this.sVal} ${this.mVal} ${this.hVal} ${this.dVal} ${this.monthVal} ${this.weekVal} ${this.yearVal}`
      if (v !== this.value) {
        this.$emit('update:value', v)
      }
      return v
    },
  },
  methods: {
    updateVal() {
      if (!this.value) {
        return
      }
      const arrays = this.value.split(' ')
      this.dealChoose()
      this.sVal = arrays[0]
      this.mVal = arrays[1]
      this.hVal = arrays[2]
      this.dVal = arrays[3]
      this.monthVal = arrays[4]
      this.weekVal = arrays[5]
      this.yearVal = arrays[6]
    },
    dealChoose() {
      const chooseArr = this.kuanjie.filter(item => item.value === this.value)
      if (chooseArr.length) {
        this.chooseCron = this.value
        this.activeName = 'k'
      }
      /*  else {
        this.activeName = 's'
      } */
    },
  },
  created() {
    this.updateVal()
  },
  components: {
    SecondAndMinute,
    hour,
    day,
    month,
    week,
    year,
  },
}
</script>

<style lang="css">
.cron {
  text-align: left;
  padding: 10px;
  background: #fff;
  /* border: 1px solid #dcdfe6; */
  /* box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04); */
}
.el-tabs--border-card {
  box-shadow: none;
}
</style>
